<template>
  <div class="">
    <div class="flex">
    <control :config="config" />
      <el-upload
        :action="get_upload_url()+model +'/UploadFile/upload'"
        :data="data"
        :show-file-list="false"
        :on-success="handleAvatarSuccess_details"
        :headers="headers"
        :before-upload="beforeAvatarUpload"
        multiple
        style="display: inline-block;"
      >
        <el-button class="el-icon-picture" type="primary" >上传</el-button>
      </el-upload>  
      <el-button type="warning"  v-if="model=='admin'" @click="cteate_cate(0)"  class="aa"  size="mini">添加相册</el-button>
      <el-button type="success" v-if="model=='admin' &&searchWhere.cate_id>4" @click="cteate_cate(searchWhere.cate_id)"  class="aa"  size="mini">相册更名</el-button>
      <el-button type="danger"  v-if="url!=''" @click="onClick()"  class="el-icon-check aa"  size="mini">使用此图</el-button>
      </div>
    <div class="layout-content">
      <el-row >
        <el-col :lg="4" >
      <el-menu
      @select="select"
      :default-active="data.cate_id"
      class="el-menu-vertical-demo">
      <el-menu-item v-for="(item,i) in cate" :key="i" :index="String(i)">
        <span slot="title">{{item}}</span>
      </el-menu-item>
      </el-menu>
        </el-col>
        <el-col :lg="20" >
          <div class="">
          <div  style="padding: 20px" class="flex_rew">
            <div class="index_img" :class="index==item.id?'img_active':''" v-for="item in tableData" :key="item.id"  >
              <div v-if="index==item.id" class="shen-del" @click="onDel(item.id)">X</div>
              <img class=""  :src="item.url" style="margin: 10px ;max-height: 100px; max-width:100px" @click="index=item.id;url=item.url"/>
            </div>
            
          </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      :current-page="current_page"
      :page-size="per_page"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import control from "@/components/control/control";
export default {
  name:'PictureLibrary',
  components: { control },
  props: { 
    cate_id:{
      type:String,
      default:'',
    } 
  },
  computed:{
    model(){
      return this.$store.state.user.model
    },
    headers(){
      return {passport:this.$store.state.admin.token}
    },
  },
  data() {
    return {
      index:"",
      url:"",
      config: [
        {
          type: "text",
          placeholder: "请输入文件名",
          field: "original_name",
          val: "",
          
         },
      ],
      searchWhere: {
        title: "",
      },
      data:{cate_id:"0"},
      tableData: [],
      cate: [],
      total: 0,
      thread: 0,
      last_id: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  mounted() {
    if(this.cate_id>0){
       this.searchWhere.cate_id=this.cate_id
       this.data.cate_id=this.cate_id
    }
    this.onSearch();
  },
  methods: {
    select(i){
       this.searchWhere.cate_id=i
       this.data.cate_id=i
       this.onSearch();
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.page = this.current_page;
      form.map = this.searchWhere;
      this.get("/"+this.model+"/UploadFile/index", form, "POST").then((e) => {
        this.tableData = e.list.data;
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.cate = e.cate
        this.cate.unshift('全部相册')
       if(form.map.cate_id==undefined){
         this.$set(this.data,'cate_id','0')
       }
        this.current_page = e.list.current_page;
      });
      this.url=''
      this.index=''
    },

    onClick(){
      this.$msg_ok("success", "选择成功");
      this.$emit('onClick',this.url)
    },
    handleAvatarSuccess_details(file) {
      if(this.thread==0){
        this.thread=setTimeout(()=>{
          this.thread=0
          this.current_page=0;
          this.searchWhere.title='';
          if(this.tableData.length>0){
            this.last_id=this.tableData[0].id
          }
          this.onSearch()
          this.$msg_ok("success", "上传成功");
        },200)
      }
    },

    beforeAvatarUpload(file) {
      return this.$beforeAvatarUpload(file,2048)
    },
    onDel(id) {
      this.$confirm('此操作将永久删除该图片, 请确保此前没有使用过此图片?', '慎重提醒', {
          confirmButtonText: '我要删除',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.get("/"+this.model+"/UploadFile/del?id=" + id, "", "POST").then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.onSearch();
          });
        })
    },
    cteate_cate(index=0){
      let title=''
      if(index>0){
        title=this.cate[index]
      }
      this.$prompt('请输入相册名称', '修改相册', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:title,
        }).then(({ value }) => {
          if(index==0||this.cate[index]!=value&&value!=''){
              this.get("/"+this.model+"/UploadFile/cteate_cate", {name:value,index:Number(index)-1},"POST").then((res) => {
                this.onSearch();
              });
          }
        })
    },
  },
};
</script>

<style>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}

.flex{
  clear: both;
}
.aa{
  display: inline-block;
  margin-left: 5px;
  height: 40px;
}
.index_img{
  border: 2px solid #cfcfcf;
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.img_active{
  border-color: #66b1ff;
}
.img_active::after{
   content:"";
   position: absolute;
   bottom: 0;
   right: 0;
   width: 0; height: 0;
   border-color: transparent #66b1ff; /*上下颜色 左右颜色*/
   border-width: 35px 35px 0 0;
   border-style: solid;
   z-index: 10;
}
.img_active::before{
  position: absolute;
  content:"";
  bottom: 4px;
  right: 5px;
  width: 8px;
  height: 15px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
  z-index: 11;

}
.flex_rew{
  display: flex;
  flex-wrap: wrap;
}
.shen-del {
    position: absolute;
    right: -9px;
    top: 0px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 14px;
    /* z-index: 10; */
    border-radius: 81%;
    height: 20px;
    width: 20px;
    line-height: 10px;
    text-align: center;
    background-color: rgb(255 0 0 );
    color: rgb(255, 255, 255);
    padding: 5px;
    cursor:pointer;
}
</style>
